import React from "react";
import LearnPropsChild from "./learn-props-child";
import LearnPropsChild2 from "./learn-props-child2";

export default class LearnProps extends React.Component {
  state = {
    num: 1,
  };

  add() {
    this.setState({
      num: this.state.num + 1,
    });
  }

  getChildData(data) {
    console.log(data);
  }

  render() {
    return (
      <div>
        <div>我是父组件</div>
        <button onClick={() => this.add()}>子组件+1</button>
        {/* 
          给LearnPropsChild这个标签定义属性
          这个属性就是我们要给这个组件传的参数
          比如我们传了一个 name属性
          值为张三
        
        */}
        {/* <LearnPropsChild onHello={this.getChildData} num={this.state.num} name="张三"></LearnPropsChild> */}
        {/* <LearnPropsChild
          onHello={(data) => this.getChildData(data)}
        ></LearnPropsChild> */}

        {/* 
          组件标签内部还可以添加相关的dom标签
          或者其他组件
          在对应的组件里面使用this.props.children接收
        */}
        <LearnPropsChild2>
          <div>组件标签中间的内容</div>
          <LearnPropsChild
            name="张三"
            onHello={(data) => this.getChildData(data)}
          ></LearnPropsChild>
        </LearnPropsChild2>
      </div>
    );
  }
}
